<template>
  <input type="text" v-model="keyWord">
  <h3>{{ keyWord }}</h3>
</template>

<script>

import { ref,customRef } from "vue";
export default {
  name: "App",

  setup() {
  // 手动挡 
  function myRef(value,delay) { 
    return customRef((track,trigger)=>{
      let timer  //防抖
      return {
        get(){
         track()//通知vue追踪value的变化
         return value
        },
        set(newValue){
          clearTimeout(timer)
           timer =setTimeout(() => {
              value=newValue
              trigger()//通知Vue去重新解析模板
            }, delay);
        }
      }
    })
   }
     

    // let keyWord = ref('hello');//自动挡的
    // 自定义ref   可以自己写逻辑  实现响应式 可以加自己的功能
    let keyWord =myRef('hello',1000)
    return { keyWord };
  },
};
</script>

<style>
</style>
